<template>
  <div class="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 py-8">
    <div class="max-w-4xl mx-auto px-4">
      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">会员卡密兑换</h1>
        <p class="text-gray-600">兑换会员卡密，解锁专享权益</p>
      </div>

      <!-- VIP 介绍卡片 -->
      <div class="grid md:grid-cols-3 gap-6 mb-8">
        <!-- 免费版卡片 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200 flex flex-col">
          <div class="bg-gradient-to-r from-gray-400 to-gray-500 p-4">
            <div class="flex items-center justify-between">
              <div>
                <h3 class="text-white text-xl font-bold">免费版</h3>
                <p class="text-gray-100 text-sm">基础体验功能</p>
              </div>
              <div class="bg-white bg-opacity-20 rounded-full p-2">
                <div class="i-carbon-user text-white text-2xl"></div>
              </div>
            </div>
          </div>
          <div class="p-6 flex-1 flex flex-col">
            <ul class="space-y-3 text-sm text-gray-600 flex-1">
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span
                  >每天重置 <b>{{ normalPoints }}</b> 能量值</span
                >
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>
                  SKU生成器使用最多 <b>{{ Math.floor(normalPoints / 2) }}</b> 次/天
                </span>
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>
                  标题生成器使用最多 <b>{{ Math.floor(normalPoints / 2) }}</b> 次/天
                </span>
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>
                  新用户注册当天限时送 <b>{{ initPoints }}</b> 能量值
                </span>
              </li>
            </ul>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <span class="text-gray-600 font-semibold">永久免费使用</span>
            </div>
            <div class="mt-4">
              <button
                @click="openPayModal('vip')"
                class="w-full bg-gradient-to-r from-gray-400 to-gray-500 text-white font-medium py-2 px-4 rounded-lg hover:from-gray-500 hover:to-gray-600 transition duration-200"
              >
                升级到VIP
              </button>
            </div>
          </div>
        </div>

        <!-- VIP 卡片 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-purple-100 flex flex-col relative">
          <!-- 折扣角标 -->
          <div class="absolute top-0 right-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg z-10">限时6折</div>
          <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-4">
            <div class="flex items-center justify-between">
              <div>
                <h3 class="text-white text-xl font-bold">VIP 会员</h3>
                <p class="text-purple-100 text-sm">标准会员权益</p>
              </div>
              <div class="bg-white bg-opacity-20 rounded-full p-2">
                <div class="i-carbon-crown text-white text-2xl"></div>
              </div>
            </div>
          </div>
          <div class="p-6 flex-1 flex flex-col">
            <ul class="space-y-3 text-sm text-gray-600 flex-1">
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>
                  每天重置 <b class="color-#9b41ef">{{ vipPoints }}</b> 能量值
                </span>
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>
                  SKU生成器使用可达 <b class="color-#9b41ef">{{ Math.floor(vipPoints / 2) }}</b> 次/天
                </span>
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>
                  标题生成器使用可达 <b class="color-#9b41ef">{{ Math.floor(vipPoints / 2) }}</b> 次/天
                </span>
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>基础AI助手功能</span>
              </li>
            </ul>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <span class="text-purple-600 font-semibold">一个月VIP权益</span>
              <div class="mt-2 flex items-center gap-2">
                <span class="text-2xl font-bold text-purple-600">¥29.9</span>
                <span class="text-sm text-gray-500 line-through">¥49.9</span>
                <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">6折</span>
              </div>
            </div>
            <div class="mt-4">
              <button
                @click="openPayModal('vip')"
                class="w-full bg-gradient-to-r from-purple-500 to-purple-600 text-white font-medium py-2 px-4 rounded-lg hover:from-purple-600 hover:to-purple-700 transition duration-200"
              >
                立即购买VIP
              </button>
            </div>
          </div>
        </div>

        <!-- SVIP 卡片 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-yellow-200 flex flex-col relative">
          <!-- 折扣角标 -->
          <div class="absolute top-0 right-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg z-10">限时6折</div>
          <div class="bg-gradient-to-r from-yellow-500 to-orange-500 p-4">
            <div class="flex items-center justify-between">
              <div>
                <h3 class="text-white text-xl font-bold">SVIP 会员</h3>
                <p class="text-yellow-100 text-sm">高级会员权益</p>
              </div>
              <div class="bg-white bg-opacity-20 rounded-full p-2">
                <div class="i-carbon-trophy text-white text-2xl"></div>
              </div>
            </div>
          </div>
          <div class="p-6 flex-1 flex flex-col">
            <ul class="space-y-3 text-sm text-gray-600 flex-1">
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>
                  每天重置 <b class="color-yellow-500">{{ svipPoints }}</b> 能量值
                </span>
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>高级AI模型优先访问</span>
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>专属客服支持</span>
              </li>
              <li class="flex items-center gap-2">
                <div class="i-carbon-checkmark text-green-500 text-base"></div>
                <span>更多高级功能</span>
              </li>
            </ul>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <span class="text-orange-600 font-semibold">一个月SVIP权益</span>
              <div class="mt-2 flex items-center gap-2">
                <span class="text-2xl font-bold text-orange-600">¥49.9</span>
                <span class="text-sm text-gray-500 line-through">¥83.9</span>
                <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">6折</span>
              </div>
            </div>
            <div class="mt-4">
              <button
                @click="openPayModal('svip')"
                class="w-full bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-medium py-2 px-4 rounded-lg hover:from-orange-500 hover:to-orange-600 transition duration-200"
              >
                立即购买SVIP
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 卡密兑换区域 -->
      <div class="bg-white rounded-2xl shadow-lg p-8 mb-6">
        <div class="max-w-md mx-auto">
          <h2 class="text-xl font-bold text-gray-800 mb-6 text-center">输入卡密兑换</h2>
          <form @submit.prevent="handleRedeem" class="space-y-4">
            <div>
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <div class="i-carbon-key text-gray-400 text-lg"></div>
                </div>
                <input
                  v-model="cardCode"
                  class="block w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  placeholder="请输入充值卡密"
                  maxlength="100"
                  required
                />
              </div>
            </div>
            <button
              type="submit"
              class="w-full bg-gradient-to-r from-purple-500 to-purple-600 text-white font-semibold py-3 px-4 rounded-xl hover:from-purple-600 hover:to-purple-700 transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
              :disabled="loading"
            >
              <span v-if="loading" class="i-carbon-renew animate-spin"></span>
              {{ loading ? '兑换中...' : '确认兑换' }}
            </button>
          </form>
        </div>
      </div>

      <!-- 重要提醒 -->
      <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
        <div class="flex items-start gap-3">
          <div class="i-carbon-warning text-amber-500 text-xl mt-0.5"></div>
          <div>
            <h3 class="font-semibold text-amber-800 mb-2">重要提醒</h3>
            <ul class="text-sm text-amber-700 space-y-1">
              <li>• 同类型会员卡密可以叠加使用，延长会员时间</li>
              <li>• 不同类型会员卡密会覆盖原有会员，请谨慎操作</li>
              <li>• 每张卡密有效期一个月，请及时使用</li>
              <li>• 如有疑问，请反馈建议，并留下联系方式</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付弹窗 -->
    <div v-if="showPayModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" @click="closePayModal">
      <div class="bg-white rounded-2xl p-6 max-w-sm w-full" @click.stop>
        <div class="text-center">
          <h3 class="text-xl font-bold text-gray-800 mb-4">{{ payType === 'vip' ? 'VIP会员' : 'SVIP会员' }}购买</h3>
          <div class="mb-4">
            <img
              :src="payType === 'vip' ? '/vip-code.png' : '/svip-code.png'"
              :alt="payType === 'vip' ? 'VIP购买二维码' : 'SVIP购买二维码'"
              class="w-48 mx-auto rounded-lg border"
            />
          </div>
          <div class="text-gray-600 text-sm mb-4">
            <span>如果扫码异常，可点击商品网址直接购买：</span>
            <a
              class="hover-underline hover-opacity-80"
              :href="payType === 'vip' ? 'https://m.tb.cn/h.6uM70Nv?tk=tUaVVkrTGGD' : 'https://m.tb.cn/h.6usPqrc?tk=Mo9wVkrfNNa'"
              target="_blank"
            >
              {{ payType === 'vip' ? 'https://m.tb.cn/h.6uM70Nv?tk=tUaVVkrTGGD' : 'https://m.tb.cn/h.6usPqrc?tk=Mo9wVkrfNNa' }}</a
            >
          </div>
          <div class="text-gray-600 text-sm mb-4">
            <p>使用 <b class="color-#333333">咸鱼APP</b> 扫描上方二维码完成支付</p>
            <p>支付成功后将自动获得卡密</p>
          </div>
          <button
            @click="closePayModal"
            class="w-full bg-gray-500 text-white font-medium py-2 px-4 rounded-lg hover:bg-gray-600 transition duration-200"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { queryCheckCard, queryRedeemCard } from '~/apis/card';

const cardCode = ref('');
const loading = ref(false);
const userStore = useUserStore();
const config = useRuntimeConfig();
const { initPoints, normalPoints, vipPoints, svipPoints } = config.public;

// 支付弹窗相关
const showPayModal = ref(false);
const payType = ref<'vip' | 'svip'>('vip');

const openPayModal = (type: 'vip' | 'svip') => {
  payType.value = type;
  showPayModal.value = true;
};

const closePayModal = () => {
  showPayModal.value = false;
};

const handleRedeem = async () => {
  try {
    loading.value = true;
    const res = await queryCheckCard(cardCode.value);
    loading.value = true;
    if (!res.data) {
      await ElMessageBox.confirm('卡密会员与您当前会员不一致，会覆盖掉当前会员，是否继续兑换？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      });
    }
    await queryRedeemCard(cardCode.value).finally(() => (loading.value = false));
    await userStore.onGetUserInfo();
    cardCode.value = '';
    ElMessage.success('兑换成功，会员已到账！');
  } catch (error) {
    loading.value = false;
  }
};

definePageMeta({ layout: 'default' });
</script>

<style lang="scss" scoped>
button {
  cursor: pointer;
}
</style>
